<!--
 * @Description: 数据同步进度条组件
 * @Author: duan_shuangjun 丶
 * @Date: 2025-01-27 12:00:00
 * @LastEditTime: 2025-09-17 13:28:55
-->
<!--数据同步进度条组件-->
<template>
  <div>
    <CustomDialog :visible="isShowDialog" class="dialog-box" @close="onClose" :isClose="false">
      <div class="dialog-content">
        <div class="title">正在同步数据</div>
        <div class="tips">当前进度: {{ currentStep }}/{{ totalSteps }}</div>
        <el-progress
          :percentage="percentage"
          color="#7C0A0C"
          :show-text="false"
          :stroke-width="10"
        ></el-progress>
        <div class="progress">同步进度: {{ percentage }}%</div>
        <div class="status-text">{{ statusText }}</div>
      </div>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { ElProgress } from 'element-plus'
import CustomDialog from '../CustomDialog/Index.vue'

interface Props {
  visible?: boolean
  totalSteps?: number
  currentStep?: number
  statusText?: string
  onClose?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  totalSteps: 100,
  currentStep: 0,
  statusText: '准备同步...'
})

const isShowDialog = ref(props.visible)
const currentStep = ref(props.currentStep)
const totalSteps = ref(props.totalSteps)
const statusText = ref(props.statusText)

// 计算进度百分比
const percentage = computed(() => {
  if (totalSteps.value === 0) {
    return 100
  }
  const progress = Math.round((currentStep.value / totalSteps.value) * 100)
  return Math.min(progress, 100)
})

// 监听 props 变化
watch(
  () => props.currentStep,
  newVal => {
    currentStep.value = newVal
  }
)

watch(
  () => props.totalSteps,
  newVal => {
    totalSteps.value = newVal
  }
)

watch(
  () => props.statusText,
  newVal => {
    statusText.value = newVal
  }
)

// 暴露方法给父组件
const setProgress = (step: number, total: number, status: string) => {
  currentStep.value = step
  totalSteps.value = total
  statusText.value = status
  console.log(`进度更新: ${step}/${total} (${Math.round((step / total) * 100)}%) - ${status}`)
}

const close = () => {
  isShowDialog.value = false
  props.onClose?.()
}

// 不允许用户手动关闭
const onClose = () => {
  // 空实现，不允许关闭
}

onMounted(() => {
  // 将实例暴露到全局变量
  window.__dataSyncProgressInstance__ = {
    setProgress,
    close
  }
  // 初始化进度
  currentStep.value = props.currentStep
  totalSteps.value = props.totalSteps
  statusText.value = props.statusText
})

onUnmounted(() => {
  // 清理全局变量
  delete window.__dataSyncProgressInstance__
})

// 暴露方法给父组件
defineExpose({
  setProgress,
  close
})
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 500px;
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: 700;
    color: #353535;
    text-align: center;
    margin-bottom: 20px;
  }

  .tips {
    padding: 20px 0;
    text-align: center;
    font-size: 18px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #353535;
  }

  .progress {
    padding-top: 20px;
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #666666;
  }

  .status-text {
    padding-top: 15px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #999999;
    min-height: 20px;
  }
}
</style>
